<template>
  <div class="container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="商品名称" prop="productName">
        <el-input
          style="width: 200px"
          maxlength="16"
          v-model.trim="queryParams.productName"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" fit-input-width clearable placeholder="全部状态">
          <el-option label="待上架" value="1"></el-option>
          <el-option label="上架中" value="2"></el-option>
          <el-option label="下架中" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['shopping:list:add']" icon="Plus" type="primary" @click="handleAdd">
          新建
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" size="default" :data="dataList">
      <el-table-column
        label="商品名称"
        min-width="150px"
        align="center"
        show-overflow-tooltip
        prop="productName"
      />
      <el-table-column label="销售价格" align="center" width="120px" prop="price">
        <template #default="{ row }">
          <div>
            {{
              row.type === 1
                ? row.price
                : row.type === 2
                ? row.integral
                : `${row.price}+${row.integral}`
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="销售类型" align="center" width="100">
        <template #default="{ row }">
          <dict-tag :options="shopping_sale_type" :value="row.type" />
        </template>
      </el-table-column>
      <el-table-column label="售卖库存数量" width="120px" align="center" prop="inventory" />
      <el-table-column label="可售库存" align="center" prop="currentInventory" />
      <el-table-column label="已售卖" width="100px" align="center" prop="soldOut" />
      <el-table-column label="订单完成数量" width="130px" align="center" prop="finishCount" />
      <el-table-column label="仅退款" align="center" prop="refundCount" />
      <el-table-column label="退货退款" align="center" prop="returnGoodsCount" />
      <!-- status 状态0删除1待上架2已上架3下架中 -->
      <el-table-column label="状态" align="center" prop="status">
        <template #default="{ row }">
          <el-tag :underline="false" :type="row.status === 2 ? 'success' : 'info'">{{
            row.status === 2
              ? '上架中'
              : row.status === 1
              ? '待上架'
              : row.status === 3
              ? '下架中'
              : '已删除'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="小程序优先级" width="120px" align="center" prop="sort" />
      <el-table-column label="创建时间" width="155px" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" min-width="160" fixed="right">
        <template #default="{ row }">
          <div>
            <el-link
              v-hasPermi="['shopping:list:list']"
              v-if="row.status !== 2"
              style="margin-right: 6px"
              :underline="false"
              type="primary"
              @click="handleList(row)"
              >上架</el-link
            >
            <el-link
              v-hasPermi="['shopping:list:ban']"
              v-if="row.status === 2"
              style="margin-right: 6px"
              :underline="false"
              type="primary"
              @click="handleBan(row)"
              >下架</el-link
            >
            <el-link
              v-hasPermi="['shopping:list:edit']"
              :disabled="row.status === 2"
              style="margin-right: 6px"
              :underline="false"
              type="primary"
              @click="handleEdit(row)"
              >编辑</el-link
            >
            <el-link
              v-hasPermi="['shopping:list:delete']"
              :disabled="row.status === 2"
              style="margin-right: 6px"
              :underline="false"
              type="primary"
              @click="handleDelete(row)"
              >删除</el-link
            >
            <el-link
              v-hasPermi="['market:activity:statistic']"
              style="margin-right: 6px"
              :underline="false"
              type="primary"
              @click="handleDetail(row)"
              >详情</el-link
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-right: 10px">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <AddDialog ref="addRef" @refresh="getList" />
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import AddDialog from './cpts/addDialog.vue'
import {
  deleteProductApi,
  getProductListApi,
  updateProductApi,
  updateProductStatusApi
} from '@/api/shopping'
const { proxy } = getCurrentInstance()
const { shopping_sale_type } = proxy.useDict('shopping_sale_type')

const queryRef = ref(null)
const showSearch = ref(true)
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  productName: '',
  status: ''
})
const total = ref(0)
const dataList = ref([])
const loading = ref(false)

// 新建
const addRef = ref(null)
function handleAdd() {
  addRef.value.init('add')
}

// 删除
function handleDelete(row) {
  ElMessageBox.confirm('商品将会被删除', '操作', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  })
    .then(() => {
      deleteProductApi(row.id).then(() => {
        ElMessage({
          type: 'success',
          message: '操作成功'
        })
        handleQuery()
      })
    })
    .catch(() => {})
}
// 编辑
function handleEdit(row) {
  addRef.value.init('edit', row.id)
}
// 上架
function handleList(row) {
  ElMessageBox.confirm('商品将会被上架', '操作', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  })
    .then(() => {
      updateProductStatusApi({ id: row.id, status: 2 }).then(() => {
        ElMessage({
          type: 'success',
          message: '操作成功'
        })
        handleQuery()
      })
    })
    .catch(() => {})
}
// 下架
function handleBan(row) {
  ElMessageBox.confirm('商品将会被下架', '操作', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  })
    .then(() => {
      updateProductStatusApi({ id: row.id, status: 3 }).then(() => {
        ElMessage({
          type: 'success',
          message: '操作成功'
        })
        handleQuery()
      })
    })
    .catch(() => {})
}
// 详情
function handleDetail(row) {
  addRef.value.init('detail', row.id)
}

// ======================= 搜索 ======================
function getList() {
  loading.value = false
  console.log('2', 2)
  getProductListApi(queryParams)
    .then((res) => {
      loading.value = false
      dataList.value = res?.data?.rows || []
      total.value = res?.data?.total || 0
    })
    .catch(() => {
      loading.value = false
      dataList.value = []
      total.value = 0
    })
}
// 搜索
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

// 重置
function resetQuery() {
  queryRef.value.resetFields()
  handleQuery()
}

getList()
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
</style>
